<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title>书香江北</title>
		<link rel="stylesheet" href="../../css/media.css" />
		<link rel="stylesheet" href="../../css/iconfont.css"c>
		<link rel="stylesheet" href="../../css/normalize.css">
		<link rel="stylesheet" href="../../css/swiper.min.css">
		<link rel="stylesheet" href="../../css/common.css" />
		<style>
			.topDiv{
				width: 100%;
				height: 3.74rem;
				position: relative;
			}
			.middleDiv{
				margin-top: .12rem;
			}
			.middleDiv .item{
				width: 1.5rem;
				/*height: 1.4rem;*/
				float: left;
			}
			.middleDiv .item img{
				width: 1.4rem;
				height: 1.4rem;
			}
			.middleDiv .item p{
				text-align: center;
				font-size: .24rem;
				color: #666666;
				margin-bottom: .5rem;
			}
			.margin-l-32{
				margin-left: .3rem;
			}
			.margin-l-44{
				margin-left: .34rem;
			}
			.swiper-pagination{
				position: absolute;
			    width: 100%;
			    height: .6rem;
			    line-height: .12rem;
			    z-index: 99;
			    text-align: right;
			    bottom: 0;
			    background:rgba(0,0,0,0.5);
			    
			}
			.swiper-container{
				height: 100%;
			}
			.swiper-pagination span{
				
				border-radius: 50%;
				margin-right: .1rem;
			}
			.swiper-pagination span:last-child{
				margin-right: .2rem;
			}
			.swiper-pagination-bullet{
				width: .16rem;
				height: .16rem;
				opacity: 1;
				border: 1px solid #939393;
			}
			.swiper-pagination-bullet-active{
				width: .18rem;
				height: .18rem;
				border: 0;
			}
			.topDiv .title{
				position: absolute;
				height: .6rem;
				line-height: .6rem;
				color: #F9F9F9;
				z-index: 100;
				bottom: 0;
				font-size: .28rem;
				left: .34rem;
			}
			.navList{
				overflow: auto;
				margin-left: .32rem;
				margin-right: .32rem;
			}
			.navList li{
				width: 25%;
				/*height: 100px;*/
				float: left;
				margin-top: .68rem;
			}
			.navList li img{
				width: 1.08rem;
				height: 1.08rem;
				display: block;
				margin: 0 auto;
			}
			.navList li p{
				font-size: .24rem;
				color: #333333;
				margin-top: .3rem;
				text-align: center;
			}
			
		</style>
	</head>
	<body>
		
		<div class="topDiv">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="../../img/literary_banner.png"/>
					</div>
					<div class="swiper-slide">
						<img src="../../img/literary_banner.png"/>
					</div>
					<div class="swiper-slide">
						<img src="../../img/literary_banner.png"/>
					</div>
				</div>
			</div>
			<p class="title">书香江北</p>
			<div class="swiper-pagination"></div>
		</div>
		<div class="middleDiv">
			<ul class="navList">
				<li>
					<img src="../../img/literary/hot.png" />
					<p>热门借阅</p>
				</li>
				<li>
					<img src="../../img/literary/bookShelf.png" />
					<p>我的书架</p>
				</li>
				<li>
					<img src="../../img/literary/recommend.png" />
					<p>图书推荐</p>
				</li>
				<li>
					<img src="../../img/literary/readerRecom.png" />
					<p>读者荐购</p>
				</li>
				<li>
					<img src="../../img/literary/search.png" />
					<p>高级检索</p>
				</li>
				<li>
					<img src="../../img/literary/borrowHistory.png" />
					<p>借阅历史</p>
				</li>
				<li>
					<img src="../../img/literary/borrowed.png" />
					<p>已借续借</p>
				</li>
				
				<li onclick="activitySpace()">
					<img src="../../img/literary/activity.png" />
					<p>活动空间</p>
				</li>
				<li>
					<img src="../../img/literary/actOrder.png" />
					<p>预约信息</p>
				</li>
				<li>
					<img src="../../img/literary/actOrder.png" />
					<p>活动预约</p>
				</li>
				<li>
					<img src="../../img/literary/bindCard.png" />
					<p>绑定证件</p>
				</li>
				<li>
					<img src="../../img/literary/cardLose.png" />
					<p>证件挂失</p>
				</li>
				
			</ul>
		</div>
		<script type="text/javascript" src="../../js/jquery.min.js" ></script>
		<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../../js/swiper.jquery.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				var mySwiper = new Swiper('.swiper-container', {
					autoplay: 3000,//可选选项，自动滑动,
					autoplayDisableOnInteraction : false,//用户手动切换后,autoplay不停止
					pagination :'.swiper-pagination'
				})
			});
			function activitySpace(){
				location.href = './activity-space.html';
			}
			
            
            
            
		</script>
		
	</body>
</html>
